<template>
  <div>
    <div style="position: fixed">
      <div style="display: flex; flex-direction: row; width: 100vw;align-items: center;">
        <div style="width: 10%">
          <div style="width:2rem;margin:0px auto">
            <svg data-v-309bcfe7="" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
            style="stroke: black; stroke-width: 5;"
            ><line data-v-309bcfe7="" x1="30" y1="30" x2="80" y2="30" ></line><line data-v-309bcfe7="" x1="30" y1="50" x2="80" y2="50"></line>
            <line data-v-309bcfe7="" x1="30" y1="70" x2="80" y2="70"></line></svg>
          </div>
        </div>
        <div style="width: 80%">
          <Search
            v-model="searchValue"
            placeholder="请输入关键词"
            @search="search()"
          />
        </div>
        <!-- style="width: 10%" -->
        <div style="width: 10%" @click='openWindow("syncPlaySetup")'>
          <div style="width:1.5rem;margin: 0 auto;">
             <!-- style="width:1rem;height:1rem" -->
          <svg t="1668498363126" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2427" ><path d="M650.24 798.72l-20.48-43.52c99.84-46.08 166.4-148.48 166.4-258.56 0-156.16-128-284.16-284.16-284.16s-284.16 128-284.16 284.16c0 110.08 64 212.48 166.4 258.56l-20.48 43.52C256 744.96 179.2 627.2 179.2 496.64c0-184.32 148.48-332.8 332.8-332.8s332.8 148.48 332.8 332.8c0 130.56-76.8 248.32-194.56 302.08z" fill="#333333" p-id="2428"></path><path d="M570.88 665.6l-15.36-46.08c53.76-17.92 87.04-66.56 87.04-122.88 0-71.68-58.88-130.56-130.56-130.56s-130.56 58.88-130.56 130.56c0 56.32 35.84 104.96 87.04 122.88l-15.36 46.08c-71.68-25.6-120.32-92.16-120.32-168.96 0-97.28 79.36-179.2 179.2-179.2s179.2 79.36 179.2 179.2c0 76.8-48.64 143.36-120.32 168.96z" fill="#333333" p-id="2429"></path><path d="M350.72 906.24l161.28-332.8 158.72 332.8z" fill="#333333" p-id="2430"></path></svg>
          </div>
          </div>
      </div>
      <!-- <SearchList
        v-if="onSearch"
        @hook:destroyed="searchListClose"
        :searchValue="searchValue"
      /> -->
    </div>
    <div style="height:54px">
        <!-- 占位符 -->
      </div>
  </div>
</template>
<style scoped>
::v-deep .van-search__content {
  /* color: #fff; */
  border-radius: 1em;
}
</style>
<script>
import { Search } from "vant";
// import SearchList from "@/components/wl/searchList.vue";
export default {
  name: "SearchBar",
  components: {
    Search,
    // SearchList,
  },

  data() {
    return {
      searchValue: "",
      // onSearch: false,
    };
  },
  methods: {
     openWindow(name) {
      this.$EventBus.$emit("openTargetWindow", { o: name });
      // this.openPage=name;
      // create(PageTaraget, { targetName });
    },
    search() {
      console.log(this.searchValue);
      this.$EventBus.$emit('openTargetWindow', {o:"SearchList",d:{searchValue:this.searchValue}})
      // this.onSearch = true;
    },
    searchListClose() {
      // this.onSearch = false;
    },
  },
};
</script>